<template>
  <div class="jbc-container jbc-home">
    <jbc-menu />
    <div class="jbc-box jbc-home__body">
      <goods-type></goods-type>
      <div class="jbc-home__content">
        <index-advertising></index-advertising>
        <div class="index-goods-title">
          <div class="index-goods-title__left">
            <img src="@/assets/images/hot_goods.png" alt="热卖商品">
          </div>
          <div class="index-goods-title__right">
            <sortButton ref="sort1" label="销量" property="1" @sort="bindChangeSort"></sortButton>
            <sortButton ref="sort2" label="价格" property="2" @sort="bindChangeSort"></sortButton>
            <sortButton ref="sort3" label="上架时间" property="3" @sort="bindChangeSort"></sortButton>
          </div>
        </div>
        <goods-list is-top="Y" :sort-type="sortType" :is-desc="isDesc"></goods-list>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
const sort1 = ref()
const sort2 = ref()
const sort3 = ref()
const sortType = ref("")
const isDesc = ref('')
const orderMap = {
  asc: 'N',
  desc: 'Y'
}
const sorts = [{key: '1', elComponent: sort1}, {key: '2', elComponent: sort2}, {key: '3', elComponent: sort3}]
const bindChangeSort = ({ property, order }) => {
  if (order) {
    sortType.value = property
    isDesc.value = orderMap[order]
    sorts.forEach(item => {
      if (item.key !== property) {
        item.elComponent.value.setDefault()
      }
    })
  } else {
    sortType.value = ''
    isDesc.value = ''
  }
}
</script>

<style scoped lang="scss">
.jbc-home {
  background-color: #fff;

  &__body {
    display: flex;
    align-items: flex-start;
  }

  &__content {
    margin-left: 10px;
    flex: 1;
  }
}

.index-goods-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 3px solid #EBEBEB;
  position: relative;
  box-sizing: border-box;
  $title-width: 124px;

  &::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: $title-width;
    border-bottom: 3px solid var(--jbc-color);
  }

  &__left {
    img {
      width: $title-width;
    }
  }

  &__right {}
}
</style>
